<template>
    <duv>
        <button @click="big">横</button>
        <button @click="small">竖</button>
        <button @click="bigger">大</button>
        <button @click="smaller">小</button>
        <input type="text" v-model="$store.state.serchValue" @keyup="serch">
        <button @click="more">添加</button>
    </duv>
</template>

<script>
    export default {
        name: "btns",
        data(){
            return {
                listReal:""
            }
        },
        methods:{
            big(){
                this.$store.commit("modifyList1","span2")
            },
            small(){
                this.$store.commit("modifyList2","span1")
            },
            more(){
                this.$store.state.list.push(this.$store.state.serchValue)
            },
            bigger(){
                if(this.$store.state.reverse==true) {
                    this.$store.state.list.reverse()
                    this.$store.commit("modifyList3",false)
                }
            },
            smaller(){
                if(this.$store.state.reverse==false) {
                    this.$store.state.list.reverse()
                    this.$store.commit("modifyList3",true)
                }
            },
            serch(){
                this.$store.commit("modifyList5",this.$store.state.serchValue)
                console.log(this.$store.state.include)
            }
        }
    }
</script>

<style scoped>
    button {
        width: 100px;
        height: 50px;
    }
</style>